<template>
  <!-- 存放音乐播放栏组件 -->
  <div>
    <van-cell-group v-for="(newSong, index) in newSongs" :key="index" @click="goPlaySong(newSong)">
      <van-cell
        class="songs"
        :title="newSong.name"
        :label="newSong.song.artists[0].name + '-' + newSong.name"
      >
        <template #right-icon>
          <van-icon name="play" class="play-icon" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  props: ["newSongs"],
  methods: {
    goPlaySong({id}){
      this.$router.push({
        name:'Play',
        query:{
          id
        }
      })
    }
  },
};
</script>

<style scoped lang="css">
.songs{
  overflow: hidden;
}
.play-icon{
  position: absolute;
  right: 0.2666667rem;
  top: 0.4666667rem;
  font-size: .5867rem;
  color: gray;
  border: 1px solid gray;
  border-radius: .6667rem;
}

</style>